<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学生信息管理系统</title>
    <link rel="stylesheet" href="studentManage.css">
    <link rel="stylesheet" href="lib/datepicker/skin/WdatePicker.css">

</head>

<body>
    <div id="one">用户：<span>123</span><a href="#">[退出登录]</a><button id="add">添加</button></div>
    <div id="two"><a href="#">学生管理</a><a href="#">成绩管理</a></div>
    <div id="maskLayer">
    </div>
    <table>

        <caption>学生信息管理系统 </caption>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>籍贯</th>
                <th>入学时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr id="model" style="display: none;">
                <td class="id"></td>
                <td class="name"></td>
                <td class="sex"></td>
                <td class="age"></td>
                <td class="nativePlace"></td>
                <td class="date"></td>
                <td>
                    <button class="delete">删除</button>
                    <button class="edit">修改</button>
                </td>
            </tr>
        </tbody>
    </table>

    <div id="tip">
        <p>确认删除吗？</p>
        <div>
            <button id="sure">确认</button>
            <button id="cancel">取消</button>
        </div>

    </div>
    <div id="addTip">
        <h2>添加学生</h2>
        <p>姓名：<input type="text" class="name"></p>
        <p> 性别: <input type="radio" name="sex" checked class="sex" value="1">男
            <input type="radio" name="sex" value="0" class="sexW">女</p>
        <p> 年龄： <input type="text" class="age"></p>
        <p class="nativePlace">籍贯：
            <select name="" id="province"></select>
            <select name="" id="city"></select>
            <select name="" id="area"></select>
        </p>
        <p> 入学时间：<input type="input" class="date" onclick="WdatePicker()"></p>
        <p>
            <button id="amend">确认</button>
            <button id="back">取消</button>

        </p>

    </div>
    <div id="error"></div>


    <script src="lib/jquery.min.js"></script>
    <script src="lib/datepicker/WdatePicker.js"></script>
    <script src="lib/citys.js"></script>
    <script>
        let address = "http://10.35.170.91:8080/"
            //发送请求，根据后端返回的数据插入到页面
        $.ajax({
            url: `${address}sel`,
            success(data) {
                data.forEach(item => {
                    let model = $("#model").clone(true).attr("id", "").show();
                    model.find(".id").html(item.id);
                    model.find(".name").html(item.name);
                    model.find(".sex").html(item.sex === "1" ? "男" : "女");
                    model.find(".age").html(item.age);
                    model.find(".nativePlace").html(item.city);
                    model.find(".date").html(item.date);
                    model.appendTo($("tbody"))

                })
            }
        })


        //删除请求
        $(".delete").click(function() {
            let num = $(this).parent().parent().find(".id").html();

            $("#maskLayer").fadeIn("fast");
            $("#tip").fadeIn(function() {
                $("#sure").click(function() {
                    $.ajax({
                        url: `${address}del`,
                        data: {
                            id: `${num}`
                        },
                        success(data) {
                            history.go(0);
                        }
                    })

                })
                $("#cancel").click(function() {
                    $("#tip").fadeOut("fast");
                    $("#maskLayer").fadeOut();
                })
            });
        })


        //添加请求
        $("#add").click(function() {
            $("#maskLayer").fadeIn("fast");
            $("#addTip").fadeIn(function() {

                $("#addTip").find(".name").focus()

                $("#amend").click(function() {

                    if ($("#addTip").find(".name").val() && $("#addTip").find(".age").val() && $("#addTip").find(".date").val()) {

                        $.ajax({
                            url: `${address}add`,
                            data: {
                                name: $("#addTip").find(".name").val(),
                                sex: $("#addTip").find(".sex")[0].checked ? 1 : 0,
                                age: $("#addTip").find(".age").val(),
                                city: $("#addTip").find("#province").val() + $("#addTip").find("#city").val() + $("#addTip").find("#area").val(),
                                date: $("#addTip").find(".date").val(),

                            },
                            success(data) {
                                history.go(0);
                            }
                        })
                    } else {
                        $("#error").fadeIn().html("添加失败");
                        setTimeout(function() {
                            $("#error").fadeOut();
                        }, 2000)
                    }

                })
                $("#back").click(function() {
                    $("#maskLayer").fadeOut();
                    $("#addTip").fadeOut("fast");
                })

            })
        })

        //修改请求
        $(".edit").click(function() {
            let m = $(this).parent().parent().find(".id").html();
            $("#maskLayer").fadeIn("fast");

            $("#addTip").find("h2").html("修改学生信息");

            $("#addTip").find(".name").val($(this).parent().parent().find(".name").html());
            $(this).parent().parent().find(".sex").html() === "男" ? $("#addTip").find(".sex").attr("checked", "checked") : $("#addTip").find(".sexW").attr("checked", "checked");
            $("#addTip").find(".age").val($(this).parent().parent().find(".age").html());
            $("#addTip").find(".date").val($(this).parent().parent().find(".date").html());
            $("#addTip").fadeIn(function() {

                $("#addTip").find(".name").focus()

                $("#amend").click(function() {

                    if ($("#addTip").find(".name").val() && $("#addTip").find(".age").val() && $("#addTip").find(".date").val()) {

                        $.ajax({
                            url: `${address}edit`,
                            data: {
                                id: m,
                                name: $("#addTip").find(".name").val(),
                                sex: $("#addTip").find(".sex")[0].checked ? 1 : 0,
                                age: $("#addTip").find(".age").val(),
                                city: $("#addTip").find("#province").val() + $("#addTip").find("#city").val() + $("#addTip").find("#area").val(),
                                date: $("#addTip").find(".date").val(),

                            },
                            success(data) {
                                history.go(0);
                            }
                        })
                    } else {
                        $("#error").fadeIn().html("修改失败");
                        setTimeout(function() {
                            $("#error").fadeOut();
                        }, 2000)
                    }

                })


                $("#back").click(function() {
                    $("#maskLayer").fadeOut();
                    $("#addTip").fadeOut("fast");
                })

            })
        })
    </script>
</body>

</html>